<!--
 * @Author: yao
 * @Date: 2024-11-20 15:11:08
 * @LastEditTime: 2024-11-22 16:47:24
 * @LastEditors: yao
 * @Description: 
 * @FilePath: \element-plus-vite-starter-main\src\Layouts\JHeader.vue
-->
<template>
  <div class="base_header">
    <div class="header_ai">
      <AISpeaker class="AI_layout"></AISpeaker>
    </div>
    <div class="header_opt">
      <el-badge :value="12" class="item">
        <el-button class="opt_item" circle :icon="Bell"></el-button>
      </el-badge>
      <el-button class="opt_item" circle :icon="Setting"></el-button>
      <el-avatar :size="32" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
    </div>
  </div>
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue'
import {
  Bell, Setting
} from '@element-plus/icons-vue'
</script>
<style scoped lang='scss'>
.base_header {
  display: flex;
  justify-content: space-between;
  height: 100%;
  width: 100%;

  // background-color: var(--ep-bg-color);
  .header_ai {
    flex-grow: 1;
  }

  .header_opt {
    background: linear-gradient(147.38deg, #0c8dc9 0%, #0b7fb7 100%);
    height: 100%;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    display: flex;
    box-shadow: var(--ep-box-shadow);
    align-items: center;
    gap: 1rem;
    padding: 0 1.6rem;

    .opt_item {
      font-size: 1.2rem;
      max-height: 32px;
    }
  }
}
</style>